<template>
  <div ref="wrapper" class="load-data-wrapper">
    <transition name="el-fade-in" mode="out-in">
      <div v-if="status === 'loading'" v-loading="true" class="item"></div>
      <div v-else-if="status === 'error'" class="item">
        <div>
          <img src="../../assets/empty.svg" alt="error" @dragstart="dragHandle" />
          <div style="color: #ccc; font-size: 14px;">数据加载失败...</div>
        </div>
      </div>
      <div v-else-if="status === 'empty'" class="item">
        <div>
          <img src="../../assets/empty.svg" alt="error" @dragstart="dragHandle" />
          <div style="color: #ccc; font-size: 14px;">暂无数据...</div>
        </div>
      </div>
      <slot />
    </transition>
  </div>
</template>

<script>
export default {
  name: "LoadDataWrapper",
  props: {
    status: {
      // 加载
      type: String,
      default: "loading" // loading, load, error, empty
    }
  },
  data() {
    return {};
  },
  methods: {
    dragHandle(e) {
      e.preventDefault();
      return false;
    }
  }
};
</script>

<style lang="scss" scoped>
.load-data-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  .item {
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      max-height: 80%;
      max-width: 80%;
      width: 11vw;
      height: auto;
    }
  }
}
</style>
